<template>
  <div class="myIncome">
    <TopromoteNav></TopromoteNav>
    <div class="writing_right">
      <div class="TitleList">
        <div class="TitleList_padding pointsdetails_title">
          <div class="TitleList_top">
            <div class="pointsdetails_title_left">
              <div class="TitleList_top_title"><span></span>我的收益 </div>
              <div class="TitleList_top_content">
                <div class="top_content_list">
                  <div class="content_list_dd">我的累计收益</div>
                  <div class="content_list_dt">{{ statistics.all }}</div>
                </div>
                <div class="top_content_list">
                  <div class="content_list_dd">本月收益</div>
                  <div class="content_list_dt">{{ statistics.now }}</div>
                </div>
                <div class="top_content_list">
                  <div class="content_list_dd">上月收益</div>
                  <div class="content_list_dt">{{ statistics.last }}</div>
                </div>
                <div class="top_content_list">
                  <div class="content_list_dd">可提现金额</div>
                  <div class="content_list_dt">{{ statistics.valid }}<span class="list_dt_btn" v-if="statistics.valid" @click="shwoWithdraw = !shwoWithdraw">提现</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pointsdetails_content">
          <div class="allflow">
            <div class="allflow_content">
              <div class="allflow_content_list">
                <div class="content_list_li">时间</div>
                <div class="content_list_li">来源客户</div>
                <div class="content_list_li">购买金额</div>
                <div class="content_list_li">佣金金额</div>
                <div class="content_list_li">状态</div>
                <div class="content_list_li">备注</div>
              </div>
            </div>
            <div class="allflow_content">
              <div v-if="infos.data.length">
                <div v-for="(item, index) in infos.data" :key="index" class="allflow_content_list">
                  <div class="content_list_li">{{ item.create_time }}</div>
                  <div class="content_list_li">{{ item.customer_name }}</div>
                  <div class="content_list_li">{{ item.buy_money }}</div>
                  <div class="content_list_li">{{ item.money }}</div>
                  <div class="content_list_li">{{ item.state }}</div>
                  <div class="content_list_li">{{ item.name }}</div>
                </div>
              </div>
              <div v-else class="not_data not_data2" v-show="infos.data.length === 0">
                <div class="not_data_icon"><img src="@a/img/bg26.jpg"/></div>
                <div class="not_data_title">暂无数据</div>
              </div>
            </div>
            <div class="page">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="infos.current_page"
                  :page-sizes="per_pages"
                  :page-size="infos.per_page"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="infos.total">
              </el-pagination>
            </div>
          </div>
        </div>



		<!-- 提现 -->
		<div class="Preview withdraw" v-show="shwoWithdraw">
			<div class="Preview_content">
				<div class="Preview_content_title">
					<div class="content_title_left"><span></span>提现</div>
					<div class="content_title_right" @click="shwoWithdraw = !shwoWithdraw"><i class="el-icon-close"></i></div>
				</div>
				<div class="Edit_content">
					<div class="Edit_content_list">
						<div class="content_list_dd">提现金额</div>
						<div class="content_list_dt"><b>￥{{statistics.valid}}</b></div>
					</div>
					<div class="Edit_content_list">
						<div class="content_list_dd">支付宝帐号</div>
						<div class="content_list_dt">
							<el-input v-model="account" placeholder="请输入您的支付宝账号"></el-input>
						</div>
					</div>
					<div class="Edit_content_list">
						<div class="content_list_dd">姓名</div>
						<div class="content_list_dt">
							<el-input v-model="username" placeholder="请输入您的姓名"></el-input>
						</div>
					</div>
				</div>
				<div class="Edit_btn">
					<button @click="submit">确定</button>
				</div>
			</div>
		</div>



      </div>
    </div>
  </div>
</template>


<script>
import TopromoteNav from "@c/common/topromoteNav/topromoteNav";
import { Loading } from 'element-ui';

export default {
  name: "myClient",
  data() {
    return {
      account: '',
      username:'',
      shwoWithdraw: false,
      infos: {
        data: [],
        per_page: 10,
        current_page: 1,
        last_page: 1,
        total: 0
      },
      statistics:{
        all: 0,
        now: 0,
        last: 0,
        valid: 0
      },
      per_pages: [10, 20, 30],
      input: '',
    };
  },
  components: {
    TopromoteNav
  },
  methods: {
    submit(){
      let that = this;
      if(!this.account){
        this.$message.error('支付宝账号不能为空')
        return false;
      }
      if(!this.username){
        this.$message.error('姓名不能为空')
        return false;
      }
      let remark = this.account +  '__' + this.username;
      let loadingInstance = Loading.service({});
      that.axios.post('/api/memberWithdrawal/add',{ remark }).then(
          res => {
            if(res.code === 1) {
              that.$message.success('提交成功！');
              that.shwoWithdraw = false;
              that.getDetail();
              that.getList();
            }
            that.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
          }
      )

    },
    //分页
    handleSizeChange(val) {
      this.infos.per_page = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.infos.current_page = val
      this.getList()

    },
    getList() {
      // loading 开始
      this.loading = true;

      let that = this;
      that.axios.get('/api/memberBenefits/list', {
        params: {
          page: that.infos.current_page,
          list_rows: that.infos.per_page,
        }
      }).then(res => {
        // loading结束
        this.loading = false;

        that.infos = res.result;

      })
    },
    getDetail() {
      // loading 开始
      this.loading = true;

      let that = this;
      that.axios.get('/api/memberBenefits/detail', ).then(res => {
        that.statistics = res.result;

      })
    },

  },
  created() {
    this.getList()
    this.getDetail()
  }
}
</script>

<style>
@import "myIncome.css";
</style>
